<template>
    <div class="divAroundCenter">
        <el-button @click="returns" type='text' class="fontColor"> < &nbsp;返回</el-button>
        <br/>
        <div class="divAroundCenterTwo">
            <el-button type="text" class=" fontColorStrong">选择应用市场&nbsp;*</el-button>
            <br/>
            <el-table
                    ref="selectMarketTable"
                    :data="marketList"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange" v-loading="loadMarketListSucc">
                <el-table-column
                        type="selection"
                        >
                </el-table-column>
                <el-table-column
                        prop="marketName"
                        label="市场名称"
                        >
                    <template slot-scope="scope">{{ scope.row.marketName }}</template>
                </el-table-column>
                <el-table-column
                        prop="coverageRange"
                        label="覆盖范围"
                        min-width="250">
                    <template slot-scope="scope">{{ scope.row.coverageRange }}</template>
                </el-table-column>
                <el-table-column
                        prop="marketAdmin"
                        label="管理员"
                        show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.marketAdmin }}</template>
                </el-table-column>
                <el-table-column
                        prop="lxdh"
                        label="联系电话"
                        show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.lxdh }}</template>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 50px">
            <el-row>
                <el-col :span='5' class="floatRight">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button type="primary" @click="onSubmit">发布</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>

    import utils from '@/views/api/utils.js';
    import {addPublishMarkets, getMarketList} from '@/views/api/api.js';

    export default {
        props: {appObj: ""}, // 用来接收父组件传给子组件的数据
        data() {
            return {
                formInline: {
                    user: '',
                    region: '',
                },
                marketList: [
                    // {marketName: '广东省应用市场', coverageRange: '广东省公安局', marketAdmin: '张三、王五', lxdh: '13712347688'},
                ],
                marketSelection: [],
                loadMarketListSucc: true,
                isSubmintSuccess:false,// 页面是否提交过
            }
        },
        methods: {
            onSubmit() {
                if(this.isSubmintSuccess){// 已经发布过了
                    this.$emit('goToSuccess', this.appObj); //主动触发upup方法，'vary'为向父组件传递的数据
                    return;
                }
                if(utils.isEmpty(this.marketSelection)){
                    this.$message.error(" 请至少选择一个市场才能发布 ");
                    return;
                }
                var publishMarketList = [];
                if (utils.isNotEmpty(this.appObj) && this.appObj.appCode) {
                    console.log("正在发布选择的市场")
                    this.marketSelection.map(function (item) {
                        console.log(item)
                        var webId = (this.appObj.webVersion && this.appObj.webVersion.id) ? this.appObj.webVersion.id : "";
                        var iosId = (this.appObj.iosVersion && this.appObj.iosVersion.id) ? this.appObj.iosVersion.id : "";
                        var androidId = (this.appObj.androidVersion && this.appObj.androidVersion.id) ? this.appObj.androidVersion.id : "";

                        publishMarketList.push({
                            appCode: this.appObj.appCode, marketCode: item.marketCode
                            , applictionType: this.appObj.appType, web: webId, ios: iosId, android: androidId
                        });
                        console.log("发布市场关联信息列表：")
                        console.log(publishMarketList)
                    }.bind(this));
                    addPublishMarkets(publishMarketList).then(function (result) {
                        console.log(result)
                        if (result.code = "S100101") {
                            this.appObj.publishMarketList = publishMarketList;
                            this.appObj.marketSelection = this.marketSelection;
                            console.log('市场关联信息，保存成功!');
                            this.isSubmintSuccess=true;
                            this.$emit('goToSuccess', this.appObj); //主动触发upup方法，'vary'为向父组件传递的数据
                        } else {
                            console.log("市场关联信息，保存失败");
                            console.log(result);
                            this.$message.error('市场关联信息保存失败 '+result.msg);
                        }
                    }.bind(this)).catch(function (error) {
                        console.log("保存失败");
                        console.log(error);
                        this.$message.error('保存失败 ');
                    }.bind(this));
                } else {
                    console.log("基础信息保存失败！")
                    console.log(this.appObj)
                    this.$message.error('基础信息保存失败，请重新打开新增页面新增app！ ');
                }
                // todo  以下为测试用逻辑
                // this.$emit('goToSuccess', this.appObj); //主动触发upup方法，'vary'为向父组件传递的数据
            },
            returns() {// 返回上一级
                this.$emit('backToBase', this.appObj); //主动触发upup方法，'vary'为向父组件传递的数据
            },
            handleSelectionChange(val) {
                this.marketSelection = val;
            },

            //获取列表
            getMarketList() {
                getMarketList({pageSize: 999999,coverageRange:1}).then(function (result) {
                    console.log(result)
                    this.marketList = result.data.list;
                    this.loadMarketListSucc = false;
                }.bind(this)).catch(function (error) {
                    console.log(error);
                }.bind(this));
            },


        },
        mounted() {

            if(utils.isNotEmpty(this.appObj)&&utils.isNotEmpty(this.appObj.appCode)&&utils.isNotEmpty(this.appObj.marketSelection)){
                console.log("该app选择市场关联信息已经提交！！！")
                console.log(this.appObj)
                this.marketSelection = this.appObj.marketSelection;
                this.loadMarketListSucc=false;
                this.isSubmintSuccess=true;
            }else{
                console.log("新增基础信息完成，跳转到选择市场发布页面 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>appObj：")
                console.log(this.appObj);
                this.getMarketList();
            }


        }
    }
</script>
<style scoped>
    .leftMargin50px {
        margin-left: 50px;
    }

    .fontColor {
        color: #666;
    }

    .fontColorStrong {
        color: #666;
        font-weight: bold;
    }

    .divAroundCenter {
        padding: 10px 10px;
        width: 100%;
        height: 100%;
    }

    .divAroundCenterTwo {
        padding: 20px 60px;
        width: 100%;
        height: 100%;
    }

    .floatRight {
        float: right;
    }
</style>

